<template>
	<view>
		<!-- 卡片，编辑资料显示 -->
		<view>
			<up-cell-group class="order-section" :border="false">
				<up-cell title="头像" style="border-top: none;">
					<template #right-icon>
						<up-image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle" width="30px"
							height="30px" style="padding-right: 30px;" @click="avatorLayoutOpen"></up-image>
					</template>
				</up-cell>
				<up-cell title="昵称" :value="userInfo.userName" :isLink="true" @click="nicknameLayoutOpen"></up-cell>
				<up-cell title="手机号" :value="userInfo.userPhone" :border="false"></up-cell>
			</up-cell-group>
		</view>

		<!-- 头像的弹出层 -->
		<!-- 		<view>
			<up-popup :show="avatorLayoutShow" mode="bottom" @close="avatorLayoutClose">
				<up-cell-group>
					<up-cell title="拍摄" style="text-align: center;"></up-cell>
					<up-cell title="从相册选择" style="text-align: center;"></up-cell>
					<up-gap height="3" bgColor="#edf2fa"></up-gap>
					<up-cell title="取消" style="text-align: center;" @click="avatorLayoutClose"></up-cell>
				</up-cell-group>
			</up-popup>
		</view> -->
		<!-- 昵称的弹出层 -->
		<view>
			<up-popup :show="nicknameLayoutShow" mode="bottom" @close="nicknameLayoutClose">
				<view style="margin-top: 10px;">
					<up-input placeholder="请输入内容" border="surround" clearable v-model="editInfo.userName"
						:showWordLimit="true" style="border: none;">
						<template #prefix>
							<up-text :bold="true" text="昵称:" margin="0 3px 0 0" type="tips">
							</up-text>
						</template>
					</up-input>
					<up-button type="success" text="确定修改"
						style="height: 50px; margin-top: 20px; border-radius: 30px; font-size: 16px; background-color: #40bd71;"
						@click="nicknameLayoutClose">
					</up-button>
				</view>
			</up-popup>
		</view>


		<!--确认修改按钮 -->
		<view style="width: 80%; margin: 10px auto;">
			<up-button @click="updateUserInfo" type="success" text="确认修改"
				style="height: 50px; margin-top: 20px; border-radius: 30px; font-size: 16px; background-color: #40bd71;">
			</up-button>
		</view>




		<!-- 退出账号按钮 -->
		<view style="width: 80%; margin: 10px auto;">
			<up-button @click="exit" type="success" text="退出账号"
				style="height: 50px; margin-top: 20px; border-radius: 30px; font-size: 16px; background-color: #40bd71;">
			</up-button>
		</view>

	</view>


</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'

	import {
		useUserStore
	} from '@/stores/user.js'

	const testText = ref("testText");
	
	const user = useUserStore().user;


	const userInfo = ref({
		userId: '',
		userAvatar: '',
		userName: '',
		userPhone: ''
	})

	const start = () => {
		console.log("开始获取用户信息");
		userInfo.value.userId = useUserStore().user.userId;
		userInfo.value.userPhone = useUserStore().user.userPhone;
		userInfo.value.userName = useUserStore().user.userName;
		userInfo.value.userAvatar = useUserStore().user.userAvatar;
		// console.log(user.userId);
	}
	start();


	const editInfo = ref({
		...userInfo.value
	})
	// 头像弹出层
	const avatorLayoutShow = ref(false)
	const avatorLayoutOpen = () => {

		wx.chooseMedia({
			count: 1,
			mediaType: ['image', 'video'],
			sourceType: ['album', 'camera'],
			maxDuration: 30,
			camera: 'back',
			success(res) {
				console.log(res.tempFiles[0].tempFilePath)
				// img.value = res.tempFiles[0].tempFilePath;
				console.log(res.tempFiles[0].size);

				uni.uploadFile({
					url: '  http://192.168.8.116:8000/agriculture-file/file/upload', // 必填，请求的url
					method: 'POST', // 默认为GET，请求方法
					filePath: res.tempFiles[0].tempFilePath, // 必填，文件路径
					name: 'files', // 必填，后台用来解析文件的字段名
					// formData: {
					// 	//要上传的文件
					// 	file: res.tempFiles[0]
					// },
					success: (res) => {
						console.log('请求成功', res.data);
						// user.userAvatar=userInfo.value.userAvatar;
						userInfo.value.userAvatar=res.data;
						
					}
				})
			}
		})
		// avatorLayoutShow.value = true
		// console.log("修改前的头像路径为：", editInfo.value.userAvatar)
	}
	const avatorLayoutClose = () => {
		avatorLayoutShow.value = false;
		console.log("修改后的头像路径为：", editInfo.value.userAvatar)
	}
	// 昵称弹出层
	const nicknameLayoutShow = ref(false)
	const nicknameLayoutOpen = () => {
		nicknameLayoutShow.value = true
		console.log("修改前的昵称为：", editInfo.value.userName)
	}
	const nicknameLayoutClose = () => {
		nicknameLayoutShow.value = false;
		userInfo.value.userName = editInfo.value.userName;
		console.log("修改后的昵称为：", userInfo.value.userName)

	}

	const updateUserInfo = () => {
		// console.log(userInfo.value.userName)
		// console.log(userInfo.value.userId)
		uni.request({
			url: '  http://localhost:8000/agriculture-user/user/updateUserInfo', // 必填，请求的url
			method: 'POST', // 默认为GET，请求方法
			data: userInfo.value,
			success: (res) => {
				console.log('请求成功', res.data);
				
				user.userName=userInfo.value.userName;
				user.userPhone=userInfo.value.userPhone;
				user.userAvatar=userInfo.value.userAvatar;
				
				uni.navigateTo({
					url: '/pages/mine/index'
				})
			}
		})
	}

	const exit = () => {
		const userStore = useUserStore();
		userStore.resetUser();
		uni.navigateTo({
			url: '/pages/mine/index'
		})
	}
</script>

<style scoped>
	/* 外层容器样式 */
	.order-section {
		margin: 10px auto;
		/* 上下 10px，左右居中 */
		background-color: #ffffff;
		padding: 40rpx;
		padding-bottom: 10rpx;
		border-radius: 20rpx;

		width: 80%;
		box-shadow: 0 -5rpx 10rpx rgba(0, 0, 0, 0.1), 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
		/* 阴影在顶部和底部 */
	}
</style>